export function uuid() {
	var s = []
	var hexDigits = '0123456789abcdef'
	for (var i = 0; i < 36; i++) {
		s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
	}
	s[14] = '4' // bits 12-15 of the time_hi_and_version field to 0010
	s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) // bits 6-7 of the clock_seq_hi_and_reserved to 01
	s[8] = s[13] = s[18] = s[23] = '-'

	var uuid = s.join('')
	return uuid
}

export const lineCharts = {
	name: 'LineCharts',
	data() {
		return {
			elId: '',
		}
	},
	props: {
		// 标题
		title: {
			type: String,
			default: '',
		},
		// 横轴
		xAxisData: {
			type: Array,
			default: () => {
				return []
			},
		},
		xAxisLabel: {
			type: Object,
			default: () => {
				return {}
			},
		},
		// 纵轴单位
		yAxisUnit: {
			type: String,
			default: '',
		},
		visualMap: {
			type: Object,
			default: () => {
				return {}
			},
		},
		// 顶部图例
		legend: {
			type: Array,
			default: () => {
				return []
			},
		},
		// 默认展示的图例，空数组=全部展示
		showLegendArr: {
			type: Array,
			default: () => {
				return []
			},
		},
		// 数据源
		seriesData: {
			type: Array,
			default: () => {
				return []
			},
		},
		// 添加线
		addLine: {
			type: Boolean,
			default: false,
		},
		// 线样式
		lineStyle: {
			type: Array,
			default: () => {
				return []
			},
		},
		// 添加区域
		addArea: {
			type: Boolean,
			default: false,
		},
		// 区域样式、范围
		areaStyle: {
			type: Object,
			default: () => {
				return []
			},
		},
		// 区域样式、范围
		style: {
			type: Object,
			default: () => {
				return {}
			},
		},
	},
	computed: {
		formatLegend() {
			if (this.legend) {
				let legendSelect = {}
				if (this.showLegendArr && this.showLegendArr.length === 0) {
					this.legend.forEach(el => {
						legendSelect[el] = true
					})
				} else if (this.showLegendArr && this.showLegendArr.length > 0) {
					this.legend.forEach((el, index) => {
						if (this.showLegendArr.includes(index)) {
							legendSelect[el] = true
						} else {
							legendSelect[el] = false
						}
					})
				}
				return {
					data: this.legend,
					selected: legendSelect,
					top: 'bottom',
				}
			} else {
				return {
					data: this.legend,
					top: 'bottom',
				}
			}
		},
		formatSeriesData() {
			if (this.legend) {
				let seriesData = []
				this.legend.forEach((el, index) => {
					//					console.log(this.seriesData)
					//					console.log(index)
					//					console.log(this.seriesData[index])
					let data = {
						connectNulls: true,
						type: 'line',
						// markPoint: {
						// 	data: [{
						// 			type: "max",
						// 			name: "最大值"
						// 		},
						// 		{
						// 			type: "min",
						// 			name: "最小值"
						// 		},
						// 	],
						// },
					}

					data.name = el
					data.data = this.seriesData[index]

					if (this.addArea) {
						let markArea = this.makeMarkArea(index)
						data.markArea = markArea
					}
					if (this.style) {
						data.areaStyle = this.style
					}

					if (this.addLine) {
						let markLine = this.makeMarkLine(index)
						data.markLine = markLine
					}

					seriesData.push(data)
				})

				console.log(seriesData)

				return seriesData
			} else {
				return []
			}
		},
	},
	created() {
		this.elId = uuid() //获取随机id
	},
	mounted() {
		this.$nextTick(() => {
			this.init()
		})
	},
	methods: {
		init() {
			var myChart = echarts.init(document.getElementById(this.elId))
			// 绘制图表
			const options = {
				title: {
					text: this.title,
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'line',
						lineStyle: {
							color: 'rgba(255,255,255,0)',
						},
					},
				},
				grid: {
					left: '15%',
					top: '10',
					bottom: '30%',
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: this.xAxisData,
					position: 'bottom',
					axisLabel: this.xAxisLabel,
				},
				yAxis: [
					{
						type: 'value',
						boundaryGap: [0, '5%'],
						axisLabel: {
							formatter: '{value}' + this.yAxisUnit,
						},
					},
				],
				calculable: true,
				legend: this.formatLegend,
				series: this.formatSeriesData,
			}

			let chartsOptions = options
			if (JSON.stringify(this.visualMap) != '{}')
				chartsOptions = Object.assign(options, {
					visualMap: this.visualMap,
				})
			console.log('chartsOptions', chartsOptions)
			myChart.setOption(chartsOptions)
			window.onresize = function () {
				myChart.resize
			}
		},
		makeMarkArea(index) {
			const dataIndex = this.areaStyle.findIndex(item => {
				return item.index === index
			})
			if (dataIndex < 0) {
				return {}
			} else {
				let markArea = {
					silent: true,
					itemStyle: {
						color: this.areaStyle[dataIndex].color,
					},
				}
				let markAreaData = []
				this.areaStyle[dataIndex].data.forEach(el => {
					markAreaData.push({
						yAxis: el,
					})
				})
				markArea = Object.assign(markArea, {
					data: [markAreaData],
				})
				return markArea
			}
		},
		makeMarkLine(index) {
			const dataIndex = this.lineStyle.findIndex(item => {
				return item.index === index
			})
			if (dataIndex < 0) {
				return {}
			} else {
				let markLine = {
					silent: false, //鼠标悬停事件
					symbol: 'none',
					lineStyle: {
						color: this.lineStyle[dataIndex].lineColor,
					},
					label: {
						textStyle: {
							color: this.lineStyle[dataIndex].textColor,
						},
					},
				}
				let markLineData = []
				this.lineStyle[dataIndex].data.forEach(el => {
					markLineData.push({
						yAxis: el,
					})
				})
				markLine = Object.assign(markLine, {
					data: markLineData,
				})
				return markLine
			}
		},
	},
	template: `
		<div :id="elId" style="width: 90%; height: 300px;margin-left:5%"></div>
	`,
}
